<template>
    <div class="lh_heard">
        <img class="ig" :src="src">
        <span class="isp" style="background: linear-gradient(130deg, rgb(36, 198, 220), rgb(84, 51, 255) 41.07%, rgb(255, 0, 153) 76.05%);"></span>
        <div class="bd"></div>
    </div>
</template>

<script>
export default {
    name: "Heard",
    data() {
        return {
            src: require("../assets/default-cover.jpg"),
        }
    }
}
</script>

<style scoped>
.bd {
    width: 100%;
    height: 120%;
    position: relative;
    z-index: 30;
}
.isp{
    pointer-events: none;
    position: absolute;
    left: 0;
    z-index: 30;
    height: 120%;
    width: 100%;
    opacity: .4;
    max-width: 120%;
    mix-blend-mode: screen;
}
.ig {
    border-style: none;
    position: absolute;
    z-index: 20;
    display: block;
    /*height: 100%;*/
    width: 100%;
    height: 200px ;
    object-fit: cover;
    background-image: linear-gradient(to bottom right,black,white)
    /*background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%);*/

    /* border-radius: 1rem; */
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*background-image: linear-gradient();*/
}
.lh_heard {
    position: relative;
    width: 100%;
    height: 200px;
    /*background-image: url("../assets/default-cover.jpg");*/
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center center;*/
}
</style>